<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>微信推广</title>
</head>
<link rel="stylesheet" href="/layui/lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="/layui/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
<link rel="stylesheet" href="/layui/css/public.css" media="all">
<link rel="stylesheet" href="/iqianfeng/css/animate.css">
<link rel="stylesheet" href="/iqianfeng/css/swiper.min.css">
<link rel="stylesheet" href="/iqianfeng/css/city-picker.css">
<link rel="stylesheet" href="/iqianfeng/css/jquery.validator.css">
<link rel="stylesheet" href="/iqianfeng/css/all.css">
<link rel="stylesheet" href="/iqianfeng/css/common.css">
<link rel="stylesheet" href="/iqianfeng/css/index.css">
<link rel="icon" href="/iqianfeng/img/tubiao2.png">

<style>
    * {
        padding: 0;
        margin: 0;
        background-color: #F0F0F0;
    }

    .flex-auto {
        width: 100%;
        height: 1800px;
    }

    .flex-auto > div {
        width: 100%;
        height: 70px;
        background-color: #f0f0f0;
    }

    .xSpwDEl {
        width: 1200px;
        height: 1800px;
        margin: 0 auto 48px;
        box-sizing: border-box;
    }

    .nav1 {
        width: 1200px;
        height: 70px;
        margin-bottom: 20px;
    }

    .xSpwDEl_left {
        width: 600px;
        height: 70px;
        float: left;
    }

    .xSpwDEl_left ul {
        width: 600px;
        height: 70px;
        display: block;
        position: relative;
    }

    .xSpwDEl_left ul li {
        float: left;
        width: 150px;
        height: 70px;
        position: relative;
    }

    .xSpwDEl_left ul li:hover a:after {
        content: "";
        position: absolute;
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background-color: #FF5722;
    }

    .xSpwDEl_left ul li a {
        text-decoration: none;
        display: block;
        width: 100%;
        height: 70px;
        font-size: 20px;
        text-align: center;
        line-height: 70px;
    }

    .xSpwDEl_right {
        float: right;
        width: 200px;
        height: 70px;
    }

    .text_secondary {
        width: 200px;
        height: 70px;
        position: relative;
    }

    .create {
        width: 150px;
        height: 50px;
        background-color: #f9a633;
        border-radius: 10px;
        border: none;
        position: relative;
        color: #F0F0F0;
        top: 10px;
        left: 25px;
        cursor: pointer;
    }

    .create:hover {
        background-color: #ff9122;
    }

    .spin_loading {
        width: 1200px;
        height: 210px;
        position: relative;
        box-sizing: border-box;
        opacity: 0.8;
    }

    .spin_container {
        width: 1200px;
        height: 210px;
    }

    .spin_container_top {
        width: 1200px;
        height: 140px;
        background-color: #ffffff

    }

    .spin_container_top_daa {
        width: 1100px;
        height: 90px;
        position: relative;
        top: 25px;
        left: 30px;
        background-color: #ffffff;
    }

    .photo {
        width: 88px;
        height: 88px;
        border-radius: 50%;
        --tw-border-opacity: 1;
        border: 2px solid #00b354;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        float: left;
    }

    .Introduction {
        width: 950px;
        height: 90px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        float: right;
        background-color: #ffffff;
    }

    .spin_Introduction {
        width: 950px;
        height: 35px;
        background-color: #ffffff;
        float: left;
    }

    .spin_Introduction strong {
        font-size: 24px;
        background-color: #FFFFFF;
        line-height: 35px;
        float: left;
        position: relative;
        margin-right: 5px;
    }

    .spin_Introduction span {
        display: inline-block;
        width: 42px;
        height: 35px;
        background: rgba(0, 179, 84, .1);
        color: #00b354;
        text-align: center;
        line-height: 35px;
        position: relative;
        border-radius: 5px;
    }

    .spin_Introduction_name {
        width: 950px;
        height: 25px;
        background-color: #FFFFFF;
    }

    .spin_Introduction_name span:first-child {
        line-height: 25px;
        color: #afb6b6;
        background-color: #FFFFFF;
    }

    .spin_Introduction_name span:last-child {
        background-color: #FFFFFF;
    }

    .spin_container_down {
        width: 1200px;
        height: 70px;
        background-color: #ffffff;
    }

    .spin_container_down_l {
        width: 130px;
        height: 50px;
        float: left;
        border-top-right-radius: 25px;
        border-bottom-right-radius: 25px;
        box-sizing: border-box;
        background-color: #f0f0f0;
    }

    .text_second {
        width: 110px;
        height: 20px;
        background-color: #f0f0f0;
        border-top-right-radius: 25px;
        font-size: 14px;
        position: relative;
        top: 5px;
        padding-left: 20px;
        color: #181a1a;
        font-weight: bolder;
    }

    .text_fifth {
        display: block;
        width: 110px;
        height: 20px;
        font-size: 12px;
        position: relative;
        top: 5px;
        border-bottom-right-radius: 25px;
        padding-left: 20px;
    }

    .spin_container_down-r {
        width: 950px;
        height: 50px;
        display: flex;
        justify-content: space-between;
        background-color: #FFFFFF;
        position: relative;
        left: 50px;
    }

    .spin_container_down-r > div {
        width: 50px;
        height: 50px;
        background-color: #FFFFFF;

    }

    .spin_container_down_t {
        width: 70px;
        height: 20px;
        background-color: #FFFFFF;
    }

    .spin_container_down_n {
        width: 70px;
        height: 30px;
        background-color: #FFFFFF;
        font-size: 14px;
    }

    .KFszLoF {
        width: 1184px;
        height: 75px;
        margin: 0 -8px;
        padding: 24px 8px 0;
    }

    .Ge_FTdA {
        width: 1200px;
        height: 70px;
        background-color: #01AAED;
    }

    .DYBmW {
        width: 1200px;
        height: 70px;
    }

    .DYBmW a {
        display: block;
        width: 145px;
        height: 70px;
        margin-right: 30px;
        float: left;
        background-color: #FFFFFF;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        text-align: center;
        line-height: 70px;
        font-size: 16px;
        z-index: 2;
    }

    .DYBmW a:hover {
        background-color: #00b354;
        color: #FFFFFF;
        font-weight: 700;
    }

    .active {
        background-color: #00b354;
    }

    .WHOFhfK {
        width: 1200px;
        height: 1800px;
        background-color: #FFFFFF;
        margin-top: -12px;
        position: relative;
        z-index: 2;
    }

    .rounded {
        width: 1152px;
        height: 1800px;
        padding: 14px 24px 24px;
        background-color: #FFFFFF;
    }

    .TwpGQMk {
        width: 1152px;
        height: 40px;
        border: 1px solid #e1e6e6;
        border-radius: 5px;
        position: relative;
    }

    .sUFlOSg {
        width: 1104px;
        height: 36px;
        padding: 2px 24px;
        border-radius: 5px;
        background-color: #f7fafa;
        position: relative;
        display: flex;
        justify-content: space-between;
    }

    .ant_col_mlrSRny {
        width: 300px;
        height: 14px;
        position: relative;
        top: 11px;
        display: flex;
        justify-content: space-between;
        background-color: #f7fafa;
    }

    .ant_anchor_link {
        width: 56px;
        height: 16px;
        float: left;
        display: flex;
    }

    .ant_anchor_link a {
        display: block;
        width: 56px;
        height: 16px;
        background-color: #f7fafa;
    }

    .ant_anchor_link a:hover {
        color: #00b354;
    }

    .ant_col {
        width: 330px;
        height: 32px;
        position: relative;
        top: 2px;
        border-radius: 5px;
        background-color: #FFFFFF;
    }

    .button_wrapper {
        display: block;
        width: 52px;
        height: 32px;
        float: left;
        padding: 0 15px;
        position: relative;
        background-color: #FFFFFF;

    }

    .button_wrapper:hover {
        border: 1px solid #00b354;
        color: #00b354;
    }

    .button_wrapper span {
        display: block;
        text-align: center;
        width: 52px;
        height: 32px;
        line-height: 32px;
        background-color: #FFFFFF;
    }

    .BkqQU0v {
        width: 1152px;
        height: 23px;
        background-color: #ffffff;
    }

    .basicIndicator {
        width: 1152px;
        height: 320px;
        background-color: #FFFFFF;
    }
    .items_baseline{
        width: 1152px;
        height: 25px;
        background-color: #FFFFFF;
    }
    .items_baseline strong{
        display: block;
        width: 64px;
        height: 25px;
        font-size: 16px;
        line-height: 25px;
        background-color: #FFFFFF;
    }
    .spin_nested_loading{
        width: 1152px;
        height: 280px;
        background-color: #FFFFFF;
    }
    .text_third{
        width: 1152px;
        height: 25px;
        margin:16px 0 0;
        line-height: 25px;
        color: #626a6a;
        background-color: #FFFFFF;
    }
    .text_third>strong{
        background-color: #FFFFFF;
    }
    .text_case_all{
        width: 1152px;
        height: 236px;
        display: flex;
        justify-content: space-between;
        background-color: #FFFFFF;
    }
    .spin_space{
        height: 236px;
        width: 217px;
        background-color: #ffffff;
    }
    .spin_space_t{
        width: 169px;
        height: 52px;
        padding: 16px 24px;
        margin: 0 0 24px;
        background-color: #f9fafa;
    }
    .spin_space_tt{
        background-color: #f9fafa;
    }
    .spin_space_tn{
        width: 169px;
        height: 37px;
        line-height: 37px;
        font-size: 24px;
        background-color: #f9fafa;
    }
    .spin_space_m{
        width: 217px;
        height: 52px;
        margin: 0 0 24px;
        background-color: #FFFFFF;
    }
    .spin_space_m_n{
        width: 217px;
        height: 22px;
        background-color: #FFFFFF;
        color: #999;
        line-height: 22px;
    }
    .spin_space_mn{
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 3px;
        position: relative;
        top: -2px;
        background-color: rgba(225,230,230,1);
    }
    .spin_space_m_num{
        width: 201px;
        height: 22px;
        margin: 8px 0 0;
        padding: 0 0 0 16px;
        line-height: 22px;
        background-color: #FFFFFF;
    }
    .spin_space_b{
        width: 217px;
        height: 52px;
        background-color: #FFFFFF;
    }
    .layui-card-header{
        font-size: 16px;
        font-weight: bolder;
    }

    .contentFeature{
        width: 1152px;
        height: 800px;
    }
    .contentFeature_dance{
        width: 1152px;
        height: 800px;
        padding: 48px 0 0;
        background-color: #FFFFFF;
    }
    .contentFeature_header{
        width: 1152px;
        height: 25px;
        background-color: #FFFFFF;
        margin: 0 0 8px;
    }
    .contentFeature_header strong{
        display: block;
        width: 64px;
        height: 25px;
        font-size: 16px;
        line-height: 25px;
        background-color: #FFFFFF;
    }
    .contentFeature_shut{
        width: 1092px;
        height: 25px;
        margin: 24px 0 18px;
        padding: 0 60px 24px 0;
        display: flex;
        background-color: #FFFFFF;
        border-bottom: 1px solid #dadada;
        justify-content: space-between;
    }
    .items_contentFeature_l{
        width: 275px;
        height: 25px;
        background-color: #FFFFFF;
    }
    .items_contentFeature_lt{
        width: 70px;
        height: 25px;
        background-color: #FFFFFF;
        float: left;
    }
    .items_contentFeature_ls{
        width: 179px;
        height: 25px;
        margin: 0 0 0 24px;
        float: right;
        background-color: #FFFFFF;
    }
    .items_contentFeature_ls>strong{
        background-color: #FFFFFF;
    }
    .items_contentFeature_ls>span{
        font-size: 16px;
        font-weight: bold;
        background-color: #FFFFFF;
    }
    .items_contentFeature_r{
        width: 330px;
        height: 25px;
        background-color: #FFFFFF;
    }
    .items_contentFeature_rt{
        width: 85px;
        height: 25px;
        float: left;
        background-color: #FFFFFF;
    }
    .items_contentFeature_rs{
        width: 218px;
        height: 25px;
        margin: 0 0 0 24px;
        float: right;
        background-color: #FFFFFF;
    }
    .items_contentFeature_rs>strong{
        background-color: #FFFFFF;
    }
    .items_contentFeature_rs>span{
        font-size: 16px;
        font-weight: bold;
        background-color: #FFFFFF;
    }
    .contentFeature_loading{
        width: 1152px;
        height: 628px;
        background-color: #FFFFFF;
    }
    .contentFeature_loading_left{
        width: 556px;
        height: 290px;
        margin: 0 0 24px;
        padding: 0 20px 0 0;
        float: left;
        background-color: #FFFFFF;
    }
    .contentFeature_loading_right{
        width: 576px;
        height: 290px;
        margin: 0 0 24px;
        float: right;
        background-color: #FFFFFF;
    }
</style>
<body>
<header id="header">
    <nav class="nav-fixed-top" id="pc_header">
        <div class="container">
            <div class="navbar">
                <div class="navbar-header">
                    <a href="#" class="nav-brand">
                        <img class="img" src="/iqianfeng/img/111.png" style="  height: 50px;">
                    </a>
                    <div class="navbar-tools">
                        <span class="icon more"></span>
                    </div>
                </div>
                <div class="navbar-mask">
                    <div class="com_header_collapse animate_3">
                        <div class="nav-mob_collapse_head">
                            <a href="https://www.iqianfeng.com" class="nav-brand">
                                <img class="img" src="/iqianfeng/img/111.png" alt="宏运营销 | 软文发布与品牌营销效果追踪平台">
                            </a>
                        </div>
                        <div class="com_header_collapse_ul_cont">
                            <ul class="nav navbar-nav navbar-nav-left">
                                <li class="">
                                    <a href="/index" class="nav-link">首页</a>
                                </li>
                                <li class="dropdown">
                                    <a href="/media?platformId=2" class="dropdown-toggle nav-link linkTo" data-link="worth-section">微博<b class="icon"></b><span class="htip-Hot">HOT</span></a>
                                </li>
                                <li class="dropdown">
                                    <a href="/media?platformId=3" class="dropdown-toggle nav-link linkTo" data-link="worth-section">小红书<b class="icon"></b><span class="htip-Hot">HOT</span></a>
                                </li>
                                <li class="dropdown">
                                    <a href="/media?platformId=5" class="dropdown-toggle nav-link linkTo" data-link="worth-section">抖音<b class="icon"></b><span class="htip-Hot">HOT</span></a>
                                </li>
                                <li class="dropdown">
                                    <a href="/media?platformId=4" class="dropdown-toggle nav-link linkTo" data-link="worth-section">b站<b class="icon"></b><span class="htip-Hot">HOT</span></a>
                                </li>
                                <%--                                --%>
                                <%--                                <li class="dropdown">--%>
                                <%--                                    <div class="dropdown-toggle nav-link linkTo" data-link="worth-section">营销产品<b class="icon"></b></div>--%>
                                <%--                                    <div class="dropdown-menu dropdown-menu-media dropdown-pc-ol">--%>
                                <%--                                        <div class="dropdown-cont">--%>
                                <%--                                            <div class="drop-media-left">--%>
                                <%--                                                <span class="drop-media-left-span active">117媒体发布</span>--%>
                                <%--                                                <span class="drop-media-left-span">117口碑监测</span>--%>
                                <%--                                                <span class="drop-media-left-span">117报告</span>--%>
                                <%--                                            </div>--%>
                                <%--                                            <div class="drop-media-content">--%>
                                <%--                                                <div class="drop-media-content-ibox drop-media-content-ibox1 active">--%>
                                <%--                                                    <div class="drop-media-content-btitle">117媒体发布<span>一站式自助稿件发布，覆盖全网10万+媒体资源</span></div>--%>
                                <%--                                                    <ul>--%>
                                <%--                                                        <li>--%>
                                <%--                                                            <a href="https://www.iqianfeng.com/xinwenmeiti/" class="nav-media-link">--%>
                                <%--                                                                <i style="background-image: url(img/media_list-icon1.png);"></i>新闻媒体<span>与全国2万多家网络媒体建立战略合作</span>--%>
                                <%--                                                            </a>--%>
                                <%--                                                        </li>--%>
                                <%--                                                        <li>--%>
                                <%--                                                            <a href="https://www.iqianfeng.com/zimeiti/" class="nav-media-link">--%>
                                <%--                                                                <i style="background-image: url(img/media_list-icon2.png);"></i>自媒体<span>4万多家自媒体资源杜绝中间商差价与虚假账号</span>--%>
                                <%--                                                            </a>--%>
                                <%--                                                        </li>--%>
                                <%--                                                        <li>--%>
                                <%--                                                            <a href="https://www.iqianfeng.com/zhongcao/" class="nav-media-link">--%>
                                <%--                                                                <i style="background-image: url(img/media_list-icon3.png);"></i>种草媒体<span>覆盖全网达人与素人，快速打造全网爆品</span>--%>
                                <%--                                                            </a>--%>
                                <%--                                                        </li>--%>
                                <%--                                                        <li>--%>
                                <%--                                                            <a href="https://www.iqianfeng.com/duanshipin/" class="nav-media-link">--%>
                                <%--                                                                <i style="background-image: url(img/media_list-icon4.png);"></i>短视频<span>丰富的KOL资源，2万余KOL与KOC入驻</span>--%>
                                <%--                                                            </a>--%>
                                <%--                                                        </li>--%>
                                <%--                                                        <li>--%>
                                <%--                                                            <a href="https://www.iqianfeng.com/taocan/" class="nav-media-link">--%>
                                <%--                                                                <div><i style="background-image: url(img/media_list-icon5.png);"></i>媒体套餐</div> <span>超多优惠套餐助力企业宣传</span>--%>
                                <%--                                                            </a>--%>
                                <%--                                                        </li>--%>
                                <%--                                                    </ul>--%>
                                <%--                                                </div>--%>
                                <%--                                                <div class="drop-media-content-ibox">--%>
                                <%--                                                    <div class="drop-media-content-btitle">117口碑监测<span>强大数据技术能力，助力业务飞速增长</span></div>--%>
                                <%--                                                    <ul>--%>
                                <%--                                                        <li>--%>
                                <%--                                                            <a href="https://www.iqianfeng.com/koubei/" class="nav-media-link">--%>
                                <%--                                                                <div><i style="background-image: url(img/media_list-icon7.png);"></i>口碑监测</div> <span>支持评论区监测，一键部署，自动化采集</span>--%>
                                <%--                                                            </a>--%>
                                <%--                                                        </li>--%>
                                <%--                                                        <!-- <li>--%>
                                <%--                                                    <div class="nav-media-span"><div><i style="background-image: url(/public/img/media_list-icon7.png);"></i>口碑监测 </div><button class="btn btn-ly-tidio btn-theme">立即咨询</button></div>--%>
                                <%--                                                    <span>支持评论区监测，一键部署，自动化采集</span>--%>
                                <%--                                                </li> -->--%>
                                <%--                                                    </ul>--%>
                                <%--                                                </div>--%>
                                <%--                                                <div class="drop-media-content-ibox">--%>
                                <%--                                                    <div class="drop-media-content-btitle">117报告<span>上万研究报告免费供您下载</span></div>--%>
                                <%--                                                    <ul>--%>
                                <%--                                                        <li>--%>
                                <%--                                                            <a href="https://baogao.iqianfeng.com/list-19" class="nav-media-link">--%>
                                <%--                                                                <i style="background-image: url(img/media_list-icon8.png);"></i>行业报告--%>
                                <%--                                                                <span>全行业研究报告</span>--%>
                                <%--                                                            </a>--%>
                                <%--                                                        </li>--%>
                                <%--                                                        <li>--%>
                                <%--                                                            <a href="https://baogao.iqianfeng.com/list-20" class="nav-media-link">--%>
                                <%--                                                                <i style="background-image: url(img/media_list-icon9.png);"></i>策划方案--%>
                                <%--                                                                <span>共享营销策划方案</span>--%>
                                <%--                                                            </a>--%>
                                <%--                                                        </li>--%>
                                <%--                                                    </ul>--%>
                                <%--                                                </div>--%>
                                <%--                                            </div>--%>
                                <%--                                        </div>--%>
                                <%--                                    </div>--%>
                                <%--                                    <div class="dropdown-menu dropdown-mob-ol">--%>
                                <%--                                        <ul class="dropdown-cont">--%>
                                <%--                                            <li><a href="http://c.iqianfeng.com/" class="nav-link">117口碑监测</a></li>--%>
                                <%--                                            <li><a href="https://baogao.iqianfeng.com/" class="nav-link">117报告</a></li>--%>
                                <%--                                        </ul>--%>
                                <%--                                    </div>--%>
                                <%--                                </li>--%>
                                <!-- <li>
                            <a href="https://www.iqianfeng.com/taocan/" class="nav-link linkTo" data-link="case-section">媒体套餐</a>
                        </li> -->
                                <!-- <li>
                        <a href="https://www.iqianfeng.com/koubei/" class="nav-link linkTo" data-link="case-section">口碑监测</a>
                        </li> -->


                                <li class="dropdown">
                                    <a href="#" class="nav-link linkTo">营销洞察<b class="icon"></b></a>
                                    <div class="dropdown-menu">
                                        <ul class="dropdown-cont">
                                            <li><a href="https://www.iqianfeng.com/yingxiaoganhuo/" class="nav-link">营销干货</a></li>
                                            <li><a href="https://www.iqianfeng.com/cehuafangan/" class="nav-link">策划方案</a></li>
                                            <li><a href="https://www.iqianfeng.com/hangyebaogao/" class="nav-link">行业报告</a></li>
                                            <li><a href="https://www.iqianfeng.com/news/" class="nav-link">资讯</a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="nav-link linkTo">SEO工具<b class="icon"></b></a>
                                    <div class="dropdown-menu">
                                        <ul class="dropdown-cont">
                                            <li><a href="/paiming/" class="nav-link">排名查询</a></li>
                                            <li><a href="/shoulu/" class="nav-link">收录查询</a></li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="dropdown">
                                    <a href="https://www.iqianfeng.com/about/" class="nav-link linkTo">了解177<b class="icon"></b></a>
                                    <div class="dropdown-menu">
                                        <ul class="dropdown-cont">
                                            <li><a href="https://www.iqianfeng.com/lianxi/" class="nav-link">联系我们</a></li>
                                            <li><a href="https://www.iqianfeng.com/help/" class="nav-link">帮助中心</a></li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                            <ul class="nav navbar-nav navbar-nav-right com_header_collapse_ul_cont_btns layui-nav layui-layout-right" style="background-color: #393d4900;margin-top: 6px;margin-right: 8px">
                                <li class="layui-nav-item layuimini-setting">
                                    <a href="javascript:;" style="color: black">${account.username}</a>
                                    <dl class="layui-nav-child">
                                        <dd>
                                            <a href="/openLogin" class="login-out">退出登录</a>
                                        </dd>
                                        <dd>
                                            <a href="/Personal?id=${account.id}" class="login-out">个人中心</a>
                                        </dd>
                                        <dd>
                                            <a href="/balance?id=${account.id}" class="login-out">余额</a>
                                        </dd>
                                    </dl>
                                </li>


                                <li>
                                    <a href="http://a.iqianfeng.com/" data-bd_yx="ty1" rel="nofollow" target="_blank" class="btn-link btn btn-theme nav-link">立即开始推广</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>
</header>
<div class="flex-auto m-6">
    <div>
        <div class="xSpwDEl">
            <div class="nav1">
                <div class="xSpwDEl_left">
                    <ul>
                        <li class="active"><a href="#">选号推广</a></li>
                        <li><a href="#">投放管理</a></li>
                        <li><a href="#">财务管理</a></li>
                        <li><a href="#">个人中心</a></li>
                    </ul>
                </div>
                <div class="xSpwDEl_right">
                    <div class="text_secondary">
                        <button class="create">创建投放活动</button>
                    </div>
                </div>
            </div>
            <div class="spin_loading">
                <div class="spin_container">
                    <div class="spin_container_top">
                        <div class="spin_container_top_daa">
                            <div class="photo" style="background-image: url('${particulars.headImg}')"></div>
                            <div class="Introduction">
                                <div class="spin_Introduction">
                                    <strong>${particulars.accountName}</strong>
                                    <span>vlog</span>
                                </div>
                                <div class="spin_Introduction_name">
                                    <span>简介</span>
                                    <span>这里是${particulars.accountName}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="spin_container_down">
                        <div class="spin_container_down_l">
                            <div class="text_second">数据表现</div>
                        </div>
                        <div class="spin_container_down-r">
                            <div>
                                <div class="spin_container_down_t">粉丝数</div>
                                <div class="spin_container_down_n">${particulars.fansAmount}</div>
                            </div>

                            <div>
                                <div class="spin_container_down_t">浏览量</div>
                                <div class="spin_container_down_n">${particulars.accountPv}</div>
                            </div>
                            <div>
                                <div class="spin_container_down_t">所属平台</div>
                                <div class="spin_container_down_n">${particulars.platform.name}</div>
                            </div>
                            <div>
                                <div class="spin_container_down_t">类型</div>
                                <div class="spin_container_down_n">${particulars.type}</div>
                            </div>
                            <div>
                                <div class="spin_container_down_t">平台地址</div>
                                <div class="spin_container_down_n">
                                    <a href="${particulars.url}">立即访问</a>
                                </div>
                            </div>
                            <div>
                                <div class="spin_container_down_t">收藏数</div>
                                <div class="spin_container_down_n">10</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="WHOFhfK">
                <div class="rounded">
                    <div class="TwpGQMk">
                        <div class="sUFlOSg">
                            <div class="ant_col_mlrSRny">
                                <div class="ant_anchor_link">
                                    <a href="#" title="基础指标">基础指标</a>
                                </div>
                                <div class="ant_anchor_link">
                                    <a href="#" title="趋势表现">趋势表现</a>
                                </div>
                                <div class="ant_anchor_link">
                                    <a href="#" title="内容特征">内容特征</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="BkqQU0v"></div>
                    <div class="basicIndicator">
                        <div class="items_baseline">
                            <strong>基础指标</strong>
                        </div>
                        <div class="spin_nested_loading">
                            <div class="text_third">
                                近30日发布
                                <strong>1</strong>
                                作品
                            </div>
                            <div class="text_case_all">
                                <div class="spin_space">
                                    <div class="spin_space_t">
                                        <sapn class="spin_space_tt">播放数</sapn>
                                        <div class="spin_space_tn">99+</div>
                                    </div>
                                    <div class="spin_space_m">
                                        <div class="spin_space_m_n">
                                            <span class="spin_space_mn"></span>
                                            &nbsp;平均播放量
                                        </div>
                                        <div class="spin_space_m_num">5000</div>
                                    </div>
                                    <div class="spin_space_b">
                                        <div class="spin_space_m_n">
                                            <span class="spin_space_mn"></span>
                                            &nbsp;播放中位数
                                        </div>
                                        <div class="spin_space_m_num">500</div>
                                    </div>
                                </div>
                                <div class="spin_space">
                                    <div class="spin_space_t">
                                        <sapn class="spin_space_tt">点赞</sapn>
                                        <div class="spin_space_tn">1000w</div>
                                    </div>
                                    <div class="spin_space_m">
                                        <div class="spin_space_m_n">
                                            <span class="spin_space_mn"></span>
                                            &nbsp;平均点赞量
                                        </div>
                                        <div class="spin_space_m_num">1234</div>
                                    </div>
                                    <div class="spin_space_b">
                                        <div class="spin_space_m_n">
                                            <span class="spin_space_mn"></span>
                                            &nbsp;点赞中位数
                                        </div>
                                        <div class="spin_space_m_num">5066</div>
                                    </div>
                                </div>
                                <div class="spin_space">
                                    <div class="spin_space_t">
                                        <sapn class="spin_space_tt">评论</sapn>
                                        <div class="spin_space_tn">99+</div>
                                    </div>
                                    <div class="spin_space_m">
                                        <div class="spin_space_m_n">
                                            <span class="spin_space_mn"></span>
                                            &nbsp;平均评论量
                                        </div>
                                        <div class="spin_space_m_num">500</div>
                                    </div>
                                    <div class="spin_space_b">
                                        <div class="spin_space_m_n">
                                            <span class="spin_space_mn"></span>
                                            &nbsp;评论中位数
                                        </div>
                                        <div class="spin_space_m_num">500</div>
                                    </div>
                                </div>
                                <div class="spin_space">
                                    <div class="spin_space_t">
                                        <sapn class="spin_space_tt">收藏</sapn>
                                        <div class="spin_space_tn">99+</div>
                                    </div>
                                    <div class="spin_space_m">
                                        <div class="spin_space_m_n">
                                            <span class="spin_space_mn"></span>
                                            &nbsp;平均收藏量
                                        </div>
                                        <div class="spin_space_m_num">500</div>
                                    </div>
                                    <div class="spin_space_b">
                                        <div class="spin_space_m_n">
                                            <span class="spin_space_mn"></span>
                                            &nbsp;收藏中位数
                                        </div>
                                        <div class="spin_space_m_num">500</div>
                                    </div>
                                </div>
                                <div class="spin_space">
                                    <div class="spin_space_t">
                                        <sapn class="spin_space_tt">弹幕</sapn>
                                        <div class="spin_space_tn">99+</div>
                                    </div>
                                    <div class="spin_space_m">
                                        <div class="spin_space_m_n">
                                            <span class="spin_space_mn"></span>
                                            &nbsp;平均弹幕量
                                        </div>
                                        <div class="spin_space_m_num">5000</div>
                                    </div>
                                    <div class="spin_space_b">
                                        <div class="spin_space_m_n">
                                            <span class="spin_space_mn"></span>
                                            &nbsp;弹幕中位数
                                        </div>
                                        <div class="spin_space_m_num">5000</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layuimini-container" style="border: none">
                            <div class="layuimini-main">
                                <div class="layui-row layui-col-space15" style="background-color: #FFFFFF">
                                    <div class="layui-col-md8"style="background-color: #FFFFFF">
                                        <div class="layui-row layui-col-space15">
                                            <div class="layui-col-md12" style="background-color: #FFFFFF">
                                                <div class="layui-card">
                                                    <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>趋势表现</div>
                                                    <div class="layui-card-body">
                                                        <div id="echarts-records" style="width: 100%;min-height:500px"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="contentFeature">
                            <div class="contentFeature_dance">
                                <div class="contentFeature_header">
                                    <strong>内容特征</strong>
                                </div>
                                <div class="contentFeature_shut">
                                    <div class="items_contentFeature_l">
                                        <div class="items_contentFeature_lt">
                                            <span class="spin_space_mn"></span>
                                            &nbsp;主要性别
                                        </div>
                                        <div class="items_contentFeature_ls">
                                            <strong>男性</strong>
                                            &nbsp;居多, 占比为
                                            <span>66.6%</span>
                                        </div>
                                    </div>
                                    <div class="items_contentFeature_r">
                                        <div class="items_contentFeature_rt">
                                            <span class="spin_space_mn"></span>
                                            &nbsp;主要年龄段
                                        </div>
                                        <div class="items_contentFeature_rs">
                                            <strong>20-35岁</strong>
                                            &nbsp;居多, 占比为
                                            <span>85.3%</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="contentFeature_loading">
                                    <div class="contentFeature_loading_left">
                                        <div class="layuimini-container">
                                            <div class="layuimini-main">
                                                <div class="layui-row layui-col-space15">
                                                    <div class="layui-col-md8">
                                                        <div class="layui-row layui-col-space15">
                                                            <div class="layui-col-md12">
                                                                <div class="layui-card">
                                                                    <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>主要性别</div>
                                                                    <div class="layui-card-body">
                                                                        <div id="option-relative" style="width: 100%;min-height:500px"></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="contentFeature_loading_right">
                                        <div class="layuimini-container">
                                            <div class="layuimini-main">
                                                <div class="layui-row layui-col-space15">
                                                    <div class="layui-col-md8">
                                                        <div class="layui-row layui-col-space15">
                                                            <div class="layui-col-md12">
                                                                <div class="layui-card">
                                                                    <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>主要年龄</div>
                                                                    <div class="layui-card-body">
                                                                        <div id="option-Release" style="width: 100%;min-height:500px"></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/layui/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/layui/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['layer', 'miniTab', 'echarts'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            miniTab = layui.miniTab,
            echarts = layui.echarts;

        miniTab.listen();


        /**
         * 报表功能
         */
        var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
        var optionRecords = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['播放量', '点赞', '评论', '收藏', '弹幕']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '播放量',
                    type: 'line',
                    data: [120, 132, 101, 134, 90, 230, 1210]
                },
                {
                    name: '点赞',
                    type: 'line',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '评论',
                    type: 'line',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '收藏',
                    type: 'line',
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: '弹幕',
                    type: 'line',
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };
        echartsRecords.setOption(optionRecords);

        // echarts 窗口缩放自适应
        window.onresize = function () {
            echartsRecords.resize();
        }

        var optionrelative = echarts.init(document.getElementById('option-relative'), 'walden')
        option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '主要性别',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 1048, name: '男性' },
                        { value: 735, name: '女性' }
                    ]
                }
            ]
        };

        optionrelative.setOption(option);

        window.onresize = function () {
            optionrelative.resize();
        }

        var optionRelease = echarts.init(document.getElementById('option-Release'), 'walden');
        Release = {
            xAxis: {
                type: 'category',
                data: ['5-10', '11-20', '21-30', '31-40', '41-50', '51-60']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [130, 140, 250, 280, 170, 110],
                    type: 'bar'
                }
            ]
        };

        optionRelease.setOption(Release);

        window.onresize = function () {
            optionRelease.resize();
        }
    });
</script>
<script src="/iqianfeng/js/jquery.min.js"></script>
<script src="/iqianfeng/js/swiper.min.js"></script>
<script src="/iqianfeng/js/wow.min.js"></script>
<script src="/iqianfeng/js/layer.js"></script>
<script src="/iqianfeng/js/jquery.validator.js"></script>
<script src="/iqianfeng/js/city-picker.data.js"></script>
<script src="/iqianfeng/js/city-picker.js"></script>
<script src="/iqianfeng/js/common.js"></script>
<script src="/iqianfeng/js/index.js"></script>
</body>
</html>
